<template>
	<view class="page">
		<view class="main">
			<view class="user-card" v-for="(item,index) in lists" :key="index">
				<view class="top">
					<view class="tips">
						<view class="tip flexAJC" style="background: #FFE6AE;color: #E1A826;" v-if="item.sign">
							{{item.sign}}
						</view>
						<view class="tip flexAJC" style="background: #FFC3C3;color: #D73030;">
							{{typeList[item.type].label}}
						</view>
						<view class="tip flexAJC" style="background: #B2CEFF;color: #326ED5;" v-if="item.sfrz==1">
							已认证
						</view>
					</view>
					<view class="user">
						<view class="name-wrap">
							<view class="name">
								{{item.memberName}}
							</view>
							<view class="label">
								{{item.position}}
							</view>
							<image class="vip" src="../../../static/img/vip-icon.png" mode="widthFix"></image>
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/gongsi.png" mode="widthFix"></image>
							{{item.companyName}}
						</view>
						<view class="ads">
							<image class="icon" src="../../../static/img/dizhi.png" mode="widthFix"></image>
							{{item.address}}
						</view>
					</view>
					<view class="avatar">
						<u-avatar size="80rpx" :src="item.headImg?fileServer+item.headImg:null"></u-avatar>
						<view class="text">
							已有<text style="font-weight: bold;">{{item.lxNum}}</text>人联系
						</view>
					</view>
				</view>
				<view class="content">
					主营品牌产品：{{item.zypphcp}}
				</view>
				<view class="content">
					销售渠道：{{item.xsqudao}}
				</view>
				<view class="btn-list">
					<view class="btn flexAJC" style="background-color: #FB6464;" @click="delYG(item)">
						<image class="icon" mode="widthFix" src="../../../static/img/shanchu-white.png"></image>
						删除
					</view>
					<view class="btn flexAJC" style="background-color: #5791F3;width: 152rpx;" @click="zrGLY(item)">
						转让管理员
					</view>
					<view class="btn flexAJC" style="background-color: #16C40B">
						<image class="icon" mode="widthFix" src="../../../static/img/liaoyilia-green.png"></image>
						聊聊
					</view>
				</view>
			</view>
			<view class="red-btn-tc">

			</view>
			<button open-type="share" class="red-btn">
				邀请新同事加入
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageIndex: 1,
				lists: [],
				fileServer: this.$fileServer,
			};
		},
		onShow() {
			this.lists = []
			this.pageIndex = 1
			this.getList()
		},
		onLoad() {

		},
		onReachBottom() {
			++this.pageIndex
			this.getList()
		},
		methods: {
			delYG(item){
				uni.showModal({
					
				})
			},
			zrGLY(item){},
			getList() {
				this.$api.custom.getCustombwlList({
					pageIndex: this.pageIndex
				}).then(res => {
					this.total = res.total
					if (res.rows.length > 0) {
						this.lists = this.lists.concat(res.rows)
					} else {
						--this.pageIndex
					}
				})
			},
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log('999')
		    }
			let yqrId = uni.getStorageSync("memberId")||'';
			let	gsId = uni.getStorageSync('companyId')||'';
		    return {
		        title: '名片编辑', //分享的名称
		        path: `/pages/card/cardShare/cardShare?yqrId=${yqrId}&gsId=${gsId}`,
		        
		    }
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F5F5;min-height: 100vh;

		.main {
			position: relative;
			padding: 30rpx 20rpx;
			overflow: hidden;

			.user-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.top {
					width: 100%;
					display: flex;
					padding-bottom: 16rpx;
					margin-bottom: 18rpx;
					border-bottom: 1px solid #F0F0F0;

					.tips {
						width: 118rpx;
						border-radius: 6rpx;
						overflow: hidden;
						flex-shrink: 0;

						.tip {
							width: 100%;
							height: 40rpx;
						}
					}

					.user {
						flex: 1;
						padding: 0 0 0 12rpx;

						.name-wrap {
							line-height: 44rpx;

							.name {

								font-size: 32rpx;
								font-weight: bold;
								margin-right: 10rpx;
								display: inline-block;
							}

							.label {
								font-size: 24rpx;
								color: #AAAAAA;
								display: inline-block;
								margin-right: 6rpx;
							}

							.vip {
								display: inline-block;
								width: 34rpx;
								height: auto;
							}

							.dept {
								width: auto;
								display: inline-block;
								height: 36rpx;
								border-radius: 18rpx;
								border: 1px solid #DE3333;
								color: #DE3333;
								font-size: 24rpx;
								padding: 0 20rpx;
								line-height: 34rpx;
							}
						}

						.ads {
							color: #777777;
							font-size: 28rpx;
							line-height: 40rpx;

							.icon {
								display: inline-block;
								width: 24rpx;
								height: auto;
								margin-right: 6rpx;
							}
						}
					}

					.avatar {
						flex-shrink: 0;
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.tx {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						}

						.text {
							margin-top: 48rpx;
							font-size: 24rpx;
						}
					}

					.avatar-left {
						width: 88rpx;
						height: 88rpx;
						position: relative;

						.tx {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}

						.vip {
							position: absolute;
							right: 0;
							top: 0;
							width: 28rpx;
							height: auto;
						}
					}

					.talk-btn {
						width: 120rpx;
						height: 50rpx;
						background: #16C40B;
						border-radius: 25rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						align-self: center;

						.icon {
							width: 24rpx;
							height: auto;
							margin-right: 4rpx;
						}
					}

				}

				.content {
					color: #AAAAAA;
					line-height: 40rpx;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.btn-list {
					margin-top: 10rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					>view {
						display: flex;
						align-items: center;
					}

					.new-add {
						color: #5977D0;
						font-size: 24rpx;
						align-items: flex-start;
					}

					.btn {
						width: 120rpx;
						height: 50rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						border-radius: 25rpx;
						margin: 0 6rpx;

						.icon {
							width: 24rpx;
							height: auto;
							margin-right: 4rpx;
						}
					}
				}

				.content-text {
					padding: 20rpx 0 0 0;
					font-size: 28rpx;
					border-top: 1px solid #F0F0F0;
				}
			}
		}
	}

	.red-btn-tc {
		width: 100%;
		height: 150rpx;
	}

	.red-btn {
		width: 684rpx;
		height: 70rpx;
		background: #EC2424;
		border-radius: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 38rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

	}
</style>